<template>
  <div class="wrap">
    <a v-for="item in items" :key="item.id" target="_blank" href="javascript:void(0)" @click="getDeatil(item)">
      <img :src="version + '/uploadFile/path/' + item.titlePicUrl" alt="titlePicUrl" @click="getDeatil(item)">
    </a>
  </div>
</template>

<script>
import axios from 'axios'
import { VERSION } from '@/constants/uri'
import { HOME_ITEM } from '@/constants/storage'
export default {
  data() {
    return {
      items: [],
      version: VERSION
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() {
      axios.get(`/getMessageRelease/3/1/4`).then(res => {
        if (res.success) {
          this.items = res.data
        }
      })
    },
    getDeatil(item) {
      sessionStorage.setItem(HOME_ITEM, JSON.stringify(item))
      window.open(`/home/detail/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    width: 1240px;
    padding: 20px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
    box-shadow: 4px 4px 4px #eee;
    img {
      width: 240px;
      transition: .6s;
      &:hover {
        transform: translateY(-20px);
      }
    }
  }
</style>
